<template>
	<view v-if="show" class="gy-jump-suspend">
		<view class="jump-suspend-box">
			<view class="suspend-more" @click.stop="switchMoreMenuFn">
				<com-badge v-if="isMallCar" :value="props.myCarProjectNumber" :widthVal="21" :heightVal="21">
					<view class="shopping-car">
						<com-icon :size="36" color="#000000" name="gy_icon_gengduo1" />
					</view>
				</com-badge>
				<com-icon v-else :size="36" color="#000000" name="gy_icon_gengduo1" />
			</view>
			<view class="diver-line"></view>
			<view class="suspend-back" @click.stop="toBackOrTopFn">
				<com-icon v-if="back" :size="36" color="#000000" name="gy_icon_fanhui1" />
				<com-icon v-else :size="36" color="#000000" name="gy_icon_zhidingdingbudingduan" />
			</view>
		</view>
	</view>
	<view v-if="showMoreMenu && show" class="more-menu-list">
		<view class="more-menu-item" v-for="(item,index) in menus" :key="index" @click.stop="selectFn(item)">
			<com-icon :size="36" color="#07BF66" :name="item.icon" />
			<view class="more-menu-title">{{item.title}}</view>
		</view>
		<view v-if="isMallCar" class="more-menu-item" @click.stop="proxy.utils.uni.route.go('/pages-mall/my-cart')">
			<com-badge :value="props.myCarProjectNumber" :widthVal="21" :heightVal="21">
				<view class="more-menu-icon">
					<com-icon name="gy_icon_shoppingCart" color="#07BF66" :size="36" />
				</view>
			</com-badge>
			<view class="more-menu-title">购物车</view>
		</view>
		<view class="more-menu-item" @click.stop="showCustomerService = true">
			<com-icon :size="40" color="#07BF66" name="gy_icon_kefu" />
			<view class="more-menu-title">联系客服</view>
		</view>
	</view>
	<view v-if="showCustomerService && show" class="customer-service gy-mask">
		<view class="customer-service-box">
			<com-image mode="" :width="550" :height="822" showMenuByLongpress src="https://oss.xawellcare.com/temp/477ca0ec9846f5815eb7482673fe5ab8520c9b7626135b1809dd6bea48f4a362.jpg" />
			<view class="customer-service-close" @click.stop="showCustomerService = false">
				<com-icon name="gy_icon_close" color="#fff" :size="28" />
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>

	import {
		ref,
		computed,
		onMounted,
		getCurrentInstance
	} from "vue";

	const props = defineProps({
		myCarProjectNumber: {
			type: Number,
			default: 0
		}
	});

	const { proxy } : any = getCurrentInstance();

	const show = ref(false);

	const patient = computed(() => proxy.store.patient.current);

	const menus = ref([]);

	const showCustomerService = ref(false);

	const back = ref(true);

	const isMallCar = ref(false);

	const showMoreMenu = ref(false);

	function switchMoreMenuFn() {
		showMoreMenu.value = !showMoreMenu.value
	}

	function toBackOrTopFn() {
		if (back.value) {
			proxy.utils.uni.route.back();
		} else {
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 300
			});
		}
	}

	function selectFn(item : any) {
		switchMoreMenuFn();
		if(item.path === "/pages/home/index"){
			proxy.utils.uni.route.switchTab("/pages/home/index");
		}else{
			if(item.patient){
				if(patient.value){
					proxy.utils.uni.route.go(item.path);
				}else{
					proxy.utils.uni.route.go("/pages-system/login/index");
				}
			}else{
				proxy.utils.uni.route.go(item.path);
			}
		}
	}

	function setMenuFn(path: string){
		if(path === "pages/home/index"){
			menus.value = [
				{
					icon: 'gy_icon_zaixianwenzhen',
					title: '我的问诊',
					patient: true,
					path: "/pages-personal/my-ask-diagnosis/index"
				},
				{
					icon: 'gy_icon_wodedaibanx',
					title: '待办列表',
					patient: true,
					path: "/pages-hospital-services/wait-processing/index"
				}
			];
			back.value = false;
			return
		}else if(path === "pages-hospital-services/ask-diagnosis/doctor/index"){
			menus.value = [
				{
					icon: 'gy_icon_shouye1',
					title: '返回首页',
					patient: false,
					path: "/pages/home/index"
				},
				{
					icon: 'gy_icon_zaixianwenzhen',
					title: '我的问诊',
					patient: true,
					path: "/pages-personal/my-ask-diagnosis/index"
				}
			];
			return
		}else if(path === "pages-mall/index"){
			isMallCar.value = false;
		}
		menus.value = [
			{
				icon: 'gy_icon_shouye1',
				title: '返回首页',
				patient: false,
				path: "/pages/home/index"
			}
		];
	}

	onMounted(() => {
		let pages = getCurrentPages();
		if(pages.length === 1){
			setMenuFn(pages[0].route);
		}else if(pages.length > 1){
			setMenuFn(pages[pages.length - 1].route);
		}
		show.value = true;
	})

</script>

<style lang="scss" scoped>
	.gy-jump-suspend {
		position: fixed;
		bottom: 300rpx;
		right: 0;
		z-index: 500;

		.jump-suspend-box {
			width: 100rpx;
			@include flex-center-center-column;
			background: rgba(255, 255, 255);
			box-shadow: 0rpx 6rpx 20rpx rgba(0, 0, 0, 0.05);
			border-radius: 10rpx;
			overflow: hidden;

			.suspend-more,
			.suspend-back {
				width: 100rpx;
				height: 100rpx;
				@include flex-center-center;
			}

			.diver-line {
				width: 32rpx;
				height: 1rpx;
				background-color: #DCDEE6;
			}
		}
	}

	.more-menu-list {
		position: fixed;
		right: 120rpx;
		bottom: 200rpx;
		z-index: 200;
		padding: 0 var(--gy-gap);
		background: rgba(255, 255, 255);
		box-shadow: 0rpx 6rpx 20rpx rgba(0, 0, 0, 0.05);
		border-radius: 10rpx;

		.more-menu-item {
			height: 90rpx;
			@include flex-start-center;
			.more-menu-icon{
				width: 21px;
				height: 21px;
				@include flex-center-center;
			}
			.more-menu-title {
				margin-left: 14rpx;
				color: #2E344A;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 40rpx;
			}
		}

		.more-menu-item+.more-menu-item {
			border-top: 1rpx solid #DCDEE6;
		}
	}

	.customer-service {
		@include flex-center-center;
		animation: gy-mask-show .4s;
		animation-fill-mode: forwards;
		.customer-service-box {
			position: relative;
			.customer-service-close{
				position: absolute;
				bottom: -130rpx;
				left: 50%;
				width: 70rpx;
				height: 70rpx;
				@include flex-center-center;
				transform: translateX(-50%);
				border: 2rpx solid #ffffff;
				border-radius: 50%;
			}
		}
	}

</style>
